<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="minemap.css">
    <script src="minemap.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="map"></div>
</body>
<script type="text/javascript" src='jquery-2.1.4.min.js'></script>
<script>
    /**
     * 基本地图加载
     * 地图缩放级别限制
     */
    minemap.accessToken = '25cc55a69ea7422182d00d6b7c0ffa93';
    minemap.solution = 716;
    var map = new minemap.Map({
        container: 'map',
        style: "http://minedata.cn/service/solu/style/id/716",
        center: [121.90154, 29.46968],
        zoom: 10,
        //        pitch: 60,
        maxZoom: 17,    //地图最大缩放级别限制
        minZoom: 9     //地图最小缩放级别限制
    });

    map.keyboard.disable();

    var kindIconObj = {
        '11': 'restaurant-15',
        '12': 'hotel-15',
        '13': 'shop-15',
        '14': 'car-15',
        '15': 'bank-15',
        '16': 'school-15',
        '17': 'hospital-15',
        '18': 'cinema-15',
        '19': 'government-15',
        '20': 'Exhibition-15',
        '21': 'house-15',
        '22': 'library-15',
        '23': 'rail-15',
        '24': 'college-15',
        '25': 'harbor-15',
        '26': 'garden-15'
    }

    map.on('load', function () {
        $.getJSON("poi_suzhou.json", null, function (data) {
            poiData = data;
            if (!map.getSource('poiPointCluster')) {
                map.addSource('poiPointCluster', {
                    type: "geojson",
                    data: poiData,
                    cluster: true,
                    clusterMaxZoom: 15,
                    clusterRadius: 50
                })
            }

            for (var kind in kindIconObj) {
                //添加非聚合图层
                map.addLayer({
                    "id": "poi-point-uncluster_" + kind,
                    "type": "symbol",
                    "source": "poiPointCluster",
                    "filter": ["all", ["!has", "point_count"], ["==", "kind", kind]],
                    "layout": {
                        "icon-image": kindIconObj[kind],
                        "icon-ignore-placement": true
                    },
                    "paint": {
                        "icon-color": "#ff0000"
                    }
                });
            }
            //添加聚合图层
//            var outerColors = [[1000, 'rgba(253, 156, 115, 0.6)'], [100, 'rgba(241, 211, 87, 0.6)'], [0, 'rgba(181, 226, 140, 0.6)']];

//            outerColors.forEach(function (color, i) {
            map.addLayer({
                "id": "point-outer-cluster",
                "type": "circle",
                "source": "poiPointCluster",
                "paint": {
                    "circle-color": {
                        property: "point_count",
                        type: "interval",
                        stops: [
                            [0, "#51bbd6"],
                            [100, "#f1f075"],
                            [750, "#f28cb1"],
                        ]
                    },
                    "circle-radius": {
                        property: "point_count",
                        type: "interval",
                        stops: [
                            [0, 20],
                            [100, 30],
                            [750, 40]
                        ]
                    }
                },
                "filter":["has","point_count"]
            });
//            });
            //添加数量图层
            map.addLayer({
                "id": "point-cluster-count",
                "type": "symbol",
                "source": "poiPointCluster",
                "layout": {
                    "text-field": "{point_count}",
                    "text-size": 10
                },
                "paint": {
                    "text-color": "rgba(0,0,0,.75)"
                },
                "filter": ["has", "point_count"]
            });
        });
    });

</script>

</html>